{% extends 'video/videos/index.html' %}
{% block head1 %}

  <title>上传视频</title>
  <script src="/static/plugins/jquery/jquery.min.js"></script>
  <script src="/static/plugins/jquery-ui/jquery-ui.min.js"></script>
{% endblock %}
{% block main %}
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">上传视频</h3>
            </div>


<form id="uploadForm" enctype="multipart/form-data">

    {% csrf_token %}

    <div class="card-body">

        <div class="form-group">

            <label>视频标题</label>

            {{ form_obj.name }}

        </div>

<div class="custom-file">


                      <input id="id_video" name="video" type="file" class="custom-file-input" >
                      <label class="custom-file-label" for="customFile">选择文件</label>
                    </div>

        <div class="form-group">





        </div>

        <div class="col-8">

            <label id="msg"></label>

        </div>

        <div class="card-footer">

            <input id="uploadButton" type="button" class="btn btn-primary" value="上传">

        </div>

    </div>

</form>
</div>
<script src="/static/plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src='/static/plugins/ckeditor/ckeditor-init.js'></script>
<script src="/static/plugins/ckeditor/ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace('content',{width:'100%',height:'400px',
            filebrowserBrowserUrl:'/ckeditor/browser/',
            filebrowserUploadUrl:'/ckeditor/upload/'});
</script>
<script>
document.getElementById('uploadButton').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    var formData = new FormData(document.getElementById('uploadForm'));
    fetch('/video_upload/', { // 替换 '' 为你的处理请求的 URL
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token }}' // 确保 CSRF 令牌被发送
        }
    })
    .then(response => response.json()) // 假设服务器返回 JSON 格式的数据
    .then(data => {
        // 假设服务器返回的数据中有一个 `msg` 字段
        document.getElementById('msg').innerText = data.msg;
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('msg').innerText = '上传失败，请稍后再试。';
    });
});

</script>
{% endblock %}